{% load static %}
<script src="{% static 'admin/xgplayer/index.js' %}" type="text/javascript"></script>
<div id="id_{{ name }}_wrapper" style="display: inline-block; width: 250px;">
    <div class="flex-item" style="flex: 1">
        <el-input v-model="value"></el-input>
        <input name="{{ raw_name }}" type="hidden" v-model="value">
    </div>
    <div class="flex-item" style="flex: 0 0 30px">
        <el-link type="primary" v-if="value" @click="visible=true">播放</el-link>
    </div>
    <player-dialog @close="visible=false" :visible="visible" :src="value"></player-dialog>
</div>
<style>
    #id_{{ name }}_wrapper{
        display: flex;
        justify-content: space-between;
    }
    .flex-item {
        display: inline-block;
        {#align-items: center;#}
    }
</style>
<script type="text/javascript">
    new Vue({
        el: '#id_{{ name }}_wrapper',
        data: {
            value: '{{ value }}',
            visible:false
        }
    });

</script>
